<template>
  <div class="padding-20">
    <div class="bg-white padding-top-30 padding-bottom-15 padding-left-right-20" id="baseInfo">
      <form-common :filed-list="topInfoList" ref="form" @rightBtnFn="rightBtnFn"></form-common>
    </div>

<!--    <div class="fill-box padding-top-bottom-10">-->
<!--      <el-button v-if="contractInfo.contractStatus == 2 && contractInfo.classification != 'supplement' && !$route.query.processCode && !$route.query.abolish && systemType == 'operationManagement' && !contractInfo.ifReturnRent" class="normal-btn f-right margin-left-20" size="mini" type="primary" @click="addContract">新增补充协议</el-button>-->
<!--      <el-button v-if="contractInfo.contractStatus == 2 && contractInfo.classification != 'supplement' && !$route.query.processCode && !$route.query.abolish && systemType == 'operationManagement' && !contractInfo.ifReturnRent" class="normal-btn f-right margin-left-20" size="mini" type="primary" @click="throwLease">退租</el-button>-->
<!--      <el-button v-if="contractCategory == 2 && systemType == 'operationManagement'" class="normal-btn f-right" size="mini" type="primary" @click="applyPayFn">申请付款</el-button>-->
<!--    </div>-->

    <!-- 租赁信息 -->
    <lease-info class="margin-bottom-20 bg-white padding-20" id="lease" v-if="contractCategory == 1" ref="leaseInfo" :lease-date="1669187618966" :title="title" :contract-type="contractType" :table-list="contractInfo.rentCycleList" :changeEffectiveTime="contractInfo.changeEffectiveTime"></lease-info>
    <!-- 营销成本 -->
    <marketing-cost class="margin-bottom-20 bg-white padding-20" id="cost" v-if="contractType == 'ZL' || contractType == 'TCCYY'" ref="marketingCost" :table-list="contractInfo.marketingCostList || []"></marketing-cost>
    <!-- 风险条款 -->
    <!-- <risks-clause id="risk" v-if="contractType == 'ZL' || contractType == 'TCCYY'" ref="risksClause" :table-list="contractInfo.riskClauseList || []"></risks-clause> -->
    <!-- 付款计划 -->
    <expend-plan class="margin-bottom-20 bg-white padding-20" id="plan" v-if="contractCategory == 2" ref="expendPlan" :table-list="contractInfo.fundPlanList || []"></expend-plan>
    <!-- 合同文件 -->
    <contract-file class="bg-white padding-20" id="file" ref="contractFile" :contract-type="contractType" :table-list="contractInfo.contractFileList || []"></contract-file>
    <!-- 申请付款的弹框 -->
    <apply-pay class="margin-bottom-20" ref="applyPay" :contractInfo="contractInfo"></apply-pay>
    <!-- 签约方 -->
    <el-dialog title="签约方" :visible.sync="signDialogShow" width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="border-b-line padding-bottom-15" :class="index != 0 ? 'padding-top-15' : ''" v-for="item in contractInfo.partnerList" :key="item.primaryKey">
        <div>
          <span class="label-width font-size-16">签约方名称：</span>
          <span class="font-size-16">{{ item.partnerName || '--' }}</span>
        </div>
        <div class="flex justify-between padding-top-10">
          <div class="flex-1 padding-right-20">
            <span class="label-width font-size-16">付款银行：</span>
            <span class="font-size-16">{{ item.paymentBank || '--' }}</span>
          </div>
          <div class="flex-1">
            <span class="label-width font-size-16">付款账号：</span>
            <span class="font-size-16">{{ item.paymentAccount || '--' }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { apiGetPayContractCharge, apiCheckBillList, apiUnpaidAmount, apiBusinessContractDetail, apiProjectList, apiDictMoreList } from '../../../api/contract';
  import { topInfoList,topInfoRefundList } from './form';
  import formCommon from '@g/components/form/formCommon.vue';
  import leaseInfo from './components/leaseInfo.vue';
  import marketingCost from './components/marketingCost.vue';
  import risksClause from './components/risksClause.vue';
  import expendPlan from './components/expendPlan.vue';
  import contractFile from './components/contractFile.vue';
  import applyPay from './components/applyPay.vue';

  export default {
    name: 'contractInfoNew',
    data() {
      return {
        topInfoList: topInfoList,
        contractType: this.$route.query.contractType,
        contractKey: this.$route.query.contractKey,
        contractCategory: this.$route.query.contractCategory, //1,收入 2,支出
        title: '租赁信息',
        signDialogShow: false,
        contractInfo: {},
        acceptanceList: [], //关联验收单
        payContractChargeList: [], //事项
        dictoryList: [],
        unpaidAmount: 0,
        systemType: localStorage.getItem("systemType"),
        constractStatusList: ['草稿', '审批中', '执行中', '驳回', '执行完毕', '已废止'],
      };
    },

    mounted() {
      this.initConfigData();
      this.getOptionList();
      this.getProjectList();
      this.getDataSource();
      this.getUnpaidAmount();
      this.getPayContractCharge();
    },

    methods: {
      //数据源
      async getDataSource(more) {
        let res = await apiBusinessContractDetail({
          contractCode: this.$route.query.contractCode,
        });
        //签约方
        let partnerName = '';
        res.partnerList.forEach(item => {
          partnerName += item.partnerName + '，';
        });
        res.partnerName = partnerName.substring(0, partnerName.length - 1);
        //如果有退租协议 需要展示退租信息
        if (res.ifReturnRent) {
          this.topInfoList = topInfoList.concat(topInfoRefundList)
        }
        this.contractInfo = res;
        this.getAcceptance();//关联验收单
        this.getReturnRentReason(res.returnRentType);//退款原因
        this.$refs.form.initModel();
        this.initBaseInfo();
      },

      //字典
      async getOptionList() {
        let res = await apiDictMoreList({ dictTypeList: ['contractType', 'return_rent_type'] });
        this.dictoryList = res.rows || [];
        let contractTypeObj = res.rows.find(item => item.dictType == 'contractType');
        let returnRentTypeObj = res.rows.find(item => item.dictType == 'return_rent_type');
        this.topInfoList.forEach(item => {
          if (item.bindFieldName == 'contractType') {
            item.optionList = contractTypeObj.dictList || [];
          }
        });
        this.topInfoListForClose.forEach(item => {
          if (item.bindFieldName == 'contractType') {
            item.optionList = contractTypeObj.dictList || [];
          }
        });
        topInfoRefundList.forEach(item => {
          if (item.bindFieldName == 'returnRentType') {
            item.optionList = returnRentTypeObj.dictList || [];
          }
        });
      },

      //退款原因
      async getReturnRentReason(key){
        let res = await apiDictMoreList({ dictTypeList: [key] });
        this.topInfoList.forEach(item => {
          if (item.bindFieldName == 'returnRentReason') {
            item.optionList = res.rows[0].dictList || [];
          }
        });
      },

      //项目信息
      async getProjectList() {
        let res = await apiProjectList();
        this.topInfoList.forEach(item => {
          if (item.bindFieldName == 'projectKey') {
            item.optionList = res.rows || [];
          }
        });
      },

      //关联验收单
      async getAcceptance() {
        let res = await apiCheckBillList({ projectKey: this.contractInfo.projectKey });
        this.acceptanceList = res.rows || [];
      },

      //支出合同申请付款的事项
      async getPayContractCharge() {
        let res = await apiGetPayContractCharge({ contractKey: this.contractKey });
        this.payContractChargeList = res.rows || [];
      },

      //取值剩余未付金额(申请付款)
      async getUnpaidAmount() {
        let res = await apiUnpaidAmount({ contractKey: this.contractKey });
        this.unpaidAmount = Number(res.unpaidAmount) || 0;
      },

      //赋值表单一些基础值
      initStatusName() {
        this.topInfoList.forEach(item => {
          if (item.bindFieldName == 'statusName') {
            if (!this.contractInfo.contractStatus) {
              item.bindFieldVal = '草稿';
            } else {
              item.bindFieldVal = this.constractStatusList[Number(this.contractInfo.contractStatus)];
            }
          }
        });
      },

      //form数据回显
      initBaseInfo() {
        this.initStatusName();
        if (this.contractInfo.contractStatus != 5) {
            this.topInfoList = this.topInfoList.filter(function(item){
            return item.bindFieldName !== 'returnEffectiveTime';
          });
        }
        this.topInfoList.forEach(item => {
          for (let i in this.contractInfo) {
            if (item.bindFieldName == i) {
              item.bindFieldVal = this.contractInfo[i];
            }
          }
        });
      },

      //初始化有关不同合同的区别
      //租赁类ZL  广告位GGZL  临时场地LSCD  无人设备场地租赁WRSB  停车场代运营TCCYY  其他QTSR
      //咨询顾问类ZX  工程维修类GC  推广类TG  行政办公类XZ  财务管理类CW  运营管理类YY
      initConfigData() {
        if (this.contractType == 'TCCYY') {
          this.title = '代运营信息';
        } else if (this.contractType == 'QTSR') {
          this.title = '收入信息';
        }
      },

      rightBtnFn(data) {
        this.signDialogShow = true;
      },

      //申请付款
      async applyPayFn() {
        this.$refs.applyPay.dialogShow = true;
        await this.$nextTick();
        this.$refs.applyPay.backFileInfo();
        this.$refs.applyPay.initFieldVal(this.unpaidAmount, this.acceptanceList, this.payContractChargeList);
      },

      addContract() {
        let model = this.$route.query;
        let path = '/businessAssets/ContractManage/create?isAgreement=true&contractType=' + model.contractType + '&contractCategory=' + model.contractCategory + '&contractKey=' + model.contractKey;
        window.open(path);
      },

      throwLease() {
        let model = this.$route.query;
        let path = '/businessAssets/ContractManage/throw?isBack=true&contractType=' + model.contractType + '&contractCode=' + model.contractCode + '&contractCategory=' + model.contractCategory + '&contractKey=' + model.contractKey;
        window.open(path);
      }
    },
    components: { formCommon, leaseInfo, marketingCost, risksClause, expendPlan, contractFile, applyPay },
  };
</script>

<style lang="scss" scoped>
  .top-box {
    background: #fbf9f9;
  }
  ::v-deep .el-form .el-form-item__label {
    padding-left: 0;
  }
  .label-width {
    display: inline-block;
    width: 100px;
    font-size: 16px;
    text-align: justify;
    text-justify: distribute-all-lines; /*ie6-8*/
    text-align-last: justify; /* ie9*/
    -moz-text-align-last: justify; /*ff*/
    -webkit-text-align-last: justify; /*chrome 20+*/
  }
</style>
